{{#>base title=data.page.slider}}

    {{#*inline "pageContent"}}
        <style media="screen">
            .table-custom td div{
                font-size: 12px;
                color: #aaa;
            }
        </style>

        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.slider}}
                </h3>

                <div class="tabs-wrap">
                    <ul  class="nav nav-tabs">
                        <li class="active">
                            <a href="slider.html" >基础</a>
                        </li>
                        <li>
                            <a href="slider-options.html" >参数说明</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">
                <input type="text" id="range" value="20" name="example_name"/>
                <div class="markdown">
<pre><code class="javascript">$p.slider("#range",{
    from:10
});</code></pre>
                </div>
            </div>
            <div class="col-md-12">
                <input type="text" id="range2" value=""  />
                <div class="markdown">
<pre><code class="javascript">$p.slider("#range2", {
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$"
});</code></pre>
                </div>
            </div>
            <div class="col-md-12">
                <input type="text" id="range3" value=""  />
                <div class="markdown">
<pre><code class="javascript">$p.slider("#range2",{
    grid: true,
    from: 3,
    force_edges:true,
    values: [
        "January", "February", "March",
        "April", "May", "June",
        "July", "August", "September",
        "October", "November", "December"
    ]
});</code></pre>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <h3>更多实例</h3>
                <p>
                    <a href="http://ionden.com/a/plugins/ion.rangeSlider/demo.html" target="_blank">
                        http://ionden.com/a/plugins/ion.rangeSlider/demo.html
                    </a>
                </p>
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/slider/app", function(app) {
                app.page.index();
            });
        </script>
    {{/inline}}

{{/base}}
